<template>
  <el-card class="card" ref="card">
    <div ref="div">
      <el-form ref="form">
        <el-row :gutter="24">
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="字典名称">
              <el-input v-model="formData.dict_name" clearable placeholder="请输入角色名称"/>
            </el-form-item>
          </el-col>
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="字典类型">
              <el-input v-model="formData.dict_name" clearable placeholder="请输入角色名称"/>
            </el-form-item>
          </el-col>
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="状态">
              <el-input v-model="formData.dict_name" clearable placeholder="请输入角色名称"/>
            </el-form-item>
          </el-col>
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="创建时间">
              <el-input v-model="formData.dict_name" clearable placeholder="请输入角色名称"/>
            </el-form-item>
          </el-col>
          <el-col :xl="4" :lg="5" :md="6" :sm="7" :xs="24">
            <el-form-item label-width="0">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="mg-8" :gutter="24">
        <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-loading="loading">
      <el-scrollbar>
        <el-table border :height="height" stripe :data="tableData" >
          <el-table-column prop="id" label="字典编码" align="center"/>
          <el-table-column prop="dict_name" label="字典名称" align="center"/>
          <el-table-column prop="dict_code" label="字典类型" align="center">
            <template #default="{row: {dict_code, dict_status, id}}">
              <el-button :disabled="dict_status === 0" type="primary" link @click="handleLink(id)">{{dict_code}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center"/>
          <el-table-column prop="dict_status" label="状态" align="center">
            <template #default="{row: {dict_status}}">
              <el-tag v-show="dict_status === 1" type="success">正常</el-tag>
              <el-tag v-show="dict_status === 0" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center"/>
          <el-table-column label="操作" align="center" width="200">
            <template #default="{row}">
              <el-button :icon="Edit" type="primary" link @click="handleEdit(row)">编辑</el-button>
              <el-button :icon="Delete" type="danger" link @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <Pagination
          :total="pagination.total"
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          @change="handlePaginationChange"
      />
    </div>
    <DictModel ref="model" @list="getList"></DictModel>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "Dict"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import {useCardHeight} from '@/hooks/useCardHeight'
import {usePagination} from '@/hooks/usePagination'
import DictModel from '@/pages/system/dict/component/DictModel.vue'
import {systemDictListItemType, systemDictQueryType} from '@/type/system.dict'
import {useModelCreateFormData} from '@/hooks/useModelCreate'
import {dictDelete, dictList} from '@/api/system.dict'
import {Edit, Delete} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'

const router = useRouter()

const { card, height, form, div } = useCardHeight()

const { Pagination, setPagination, pagination } = usePagination()

const loading = ref<boolean>(false)

const formData = reactive<systemDictQueryType>({
  dict_name: "",
  dict_code: "",
  dict_status: -1,
  start_time: "",
  end_time: ""
})

const tableData = ref<systemDictListItemType[]>([])

const model = ref<{
  init: () => void
  edit: (row: systemDictListItemType) => void
}>()

const handleLink = (id: number) => {
  router.push({path: '/system/dict-value', query: {id: id}})
}

const getList = () => {
  loading.value = true
  tableData.value = []
  dictList({
    data: formData,
    current: pagination.current,
    pageSize: pagination.pageSize
  }).then(res => {
    if (res.code === 200) {
      tableData.value = res.data.list
      setPagination(res.data.total, res.data.current, res.data.pageSize)
      loading.value = false
    }
  })
}

// 添加
const handleAdd = () => {
  model.value?.init()
}

// 编辑
const handleEdit = (row: systemDictListItemType) => {
  model.value?.edit(row)
}

// 删除
const handleDelete = (row: systemDictListItemType) => {
  dictDelete({
    id: row.id
  }).then(res => {
    if (res.code === 200) {
      if (tableData.value.length === 1) {
        if (pagination.current > 1) {
          pagination.current = pagination.current - 1
        }
      }
      getList()
      ElMessage.success(res.msg)
    }
  })
}

// 查询
const handleSearch = () => {
  setPagination(0, 1, 10)
  getList()
}
// 重置
const handleReset = () => {
  useModelCreateFormData<systemDictQueryType>(formData)
  formData.dict_status = -1
  handleSearch()
}

const handlePaginationChange = () => {
  getList()
}
onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">

</style>
